<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>测试</title>
  </head>
  <body>
    <div>
      <button id="context">链接服务器</button>
      <button id="send">发送</button>
      <button id="submit">群发</button>
      链接服务器接受的数据：
      <span id="txt"></span>
    </div>
    <script>
      const context = document.getElementById("context");
      const send = document.getElementById("send");
      const txt = document.getElementById("txt");

      let wss = null;
      context.onclick = function () {
        wss = new WebSocket("ws://localhost:9998");
        wss.onopen = () => {
          console.log("服务器链接成功");
        };

        wss.onclose = () => {
          console.log("服务器链接失败");
        };
        wss.onmessage = (msg) => {
          txt.innerHTML = msg.data;
        };
      };

      send.onclick = function () {
        wss.send(
          JSON.stringify({
            action: "getData",
            socketType: "trendData",
            chartName: "trend",
            value: "",
          })
        );
      };

      submit.onclick = function () {
        wss.send(
          JSON.stringify({
            action: "postData",
            socketType: "sellerData",
            chartName: "seller",
            value: "",
          })
        );
      };
    </script>
  </body>
</html>
